<template>
  <Card v-style="'boxstyle_bg_1'">
    <template #header>
      <div class="header">
        <img src="@/assets/webmasterData/icon4.png" alt="" />
        <span>站点权重排名</span>
      </div>
    </template>
    <div id="main" ref="main"></div>
  </Card>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, defineProps, toRefs } from "vue";
import * as echarts from "echarts";
import Card from "@/components/Card";
import { echartsAutoPlay } from "@/utils/echarts";
import { bigDataApi } from "@/api/bigData";
const main = ref();
import store from "@/store";
let date = 'day';
const props = defineProps({
  selectdate:{
    type: String,
    default: 'day'
  }
})
const { selectdate } = toRefs(props);

console.log(props)

watch(
  selectdate,
  (e) => {
    // console.log(e)
    date = e;
    getRankingWeight();
  },
  {
    immediate: true,
  }
);

onMounted(() => {
  // getRankingWeight();
});
async function getRankingWeight() {
  const result = await bigDataApi.rankingWeight({
    date: date,
    token: store.getters.user.token
  });
  const { data } = result;
  console.log(data)
  // 初始化图表
  setEcharts(data);
}
function setEcharts(data) {
  if(data.length > 0){
    var dataList = []
    var bdList = []
    var sgList = []
    var smList = []
    var threeList = []
    data.forEach((item,index) => {
      dataList.push(item.index)
      bdList.push(item.bd)
      sgList.push(item.sg)
      smList.push(item.sm)
      threeList.push(item.three)
    });
    var myChart = echarts.init(main.value);
  }
  
  var option = {
    tooltip: {
      trigger: "axis",
      extraCssText: "z-index:999",
      confine: true,
      backgroundColor: "rgba(255,255,255,0.8)",
    },
    grid: {
      top: "20%",
      left: 0,
      right: "5%",
      bottom: "0",
      containLabel: true,
    },
    legend: {
      top: 0,
      right: 0,
      textStyle: {
        color: "#C8EAF9",
      },
      icon: "circle",
      itemWidth: 10,  // 设置宽度
      itemHeight: 10 // 设置高度
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          color: "#CBD2D5",
        },
        axisLine: {
          lineStyle: {
            color: "#CCCCCC",
          },
        },
        axisTick: {
          show: false,
        },
        data: dataList,
      },
    ],
    yAxis: [
      {
        type: "value",
        alignTicks: true,
        axisLabel: {
          textStyle: {
            color: "#CBD2D5",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#222324",
          },
        },
      },
    ],
    series: [
      {
        name: "百度",
        type: "bar",
        itemStyle: {
          borderRadius: 5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#2CCCFA" },
            { offset: 1, color: "#586BFB" },
          ]),
        },
        data: bdList,
      },
      {
        name: "搜狗",
        type: "bar",
        itemStyle: {
          borderRadius: 5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#F25113" },
            { offset: 1, color: "#FF7E4C" },
          ]),
        },
        data: sgList,
      },
      {
        name: "神马",
        type: "bar",
        itemStyle: {
          borderRadius: 5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FFB6AF" },
            { offset: 1, color: "#FF6BB4" },
          ]),
        },
        data: smList,
      },
      {
        name: "360",
        type: "bar",
        itemStyle: {
          borderRadius: 5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#23B3D0" },
            { offset: 1, color: "#64E6B3" },
          ]),
        },
        data: threeList,
      },
    ],
  };

  myChart.setOption(option);
  echartsAutoPlay(option,myChart)
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  img {
    width: 18px;
    height: 18px;
    margin-right: 10px;
  }
}
#main {
  width: 100%;
  height: 100%;
}
</style>
